<template>
  <div class="popup flex-center flex-align-items-center">
    <div class="main">
      <div class="main-header">
        <p>案例详情</p>
        <i class="iconfont icon-guanbi" @click="close"></i>
      </div>
      <div class="detail">
        <div class="detail-header flex-between flex-align-items-center">
          <p class="detail-header-name font-16-B">案例名称：{{ info.name }}</p>
          <p class="detail-header-btn font-14 pointer">{{ info.collect ? '取消收藏' : '收藏' }}</p>
        </div>
        <div class="detail-main flex-between">
          <div class="prd">
            <h3 class="font-14">案例分类：{{ info.cate }}</h3>
            <div class="prd-img flex pointer">
              <img :src="info.img">
              <p>
                <i class="iconfont icon-bofang"></i>
              </p>
            </div>
            <div class="prd-data flex-around">
              <div class="prd-data-item">
                <p class="prd-data-item-label font-12">播放量</p>
                <p class="prd-data-item-value font-14-B">{{ numConvert(info.count, 2) }}</p>
              </div>
              <div class="prd-data-item">
                <p class="prd-data-item-label font-12">点赞量</p>
                <p class="prd-data-item-value font-14-B">{{ numConvert(info.count, 2) }}</p>
              </div>
              <div class="prd-data-item">
                <p class="prd-data-item-label font-12">评论数</p>
                <p class="prd-data-item-value font-14-B">{{ numConvert(info.count, 2) }}</p>
              </div>
              <div class="prd-data-item">
                <p class="prd-data-item-label font-12">互动率</p>
                <p class="prd-data-item-value font-14-B">{{ numConvert(info.count, 2) }}</p>
              </div>
            </div>
            <h3 class="font-14">内容标题</h3>
            <div class="prd-title font-14">{{ info.desc }}</div>
            <h3 class="font-14">内容简介</h3>
            <el-tooltip :content="info.desc" placement="top" effect="dark">
              <div class="prd-title font-14 ellipsis-3">{{ info.desc }}</div>
            </el-tooltip>
          </div>
          <div class="blog">
            <p class="blog-tab font-14-B">红人详情</p>
            <div class="blog-main flex flex-column flex-align-items-center">
              <p class="blog-btn font-14 pointer">详情</p>
              <img :src="info.avatar" class="blog-avatar">
              <p class="blog-name font-16-B">{{ info.name }}</p>
              <p class="blog-tag font-12">{{ info.cate }}</p>
              <p class="blog-split"></p>
              <div class="blog-data flex flex-wrap">
                <div class="blog-data-item">
                  <p class="blog-data-item-value font-16-B">{{ numConvert(info.count, 2) }}</p>
                  <p class="blog-data-item-label font-12">平均播放量</p>
                </div>
                <div class="blog-data-item">
                  <p class="blog-data-item-value font-16-B">{{ numConvert(info.count, 2) }}</p>
                  <p class="blog-data-item-label font-12">粉丝数</p>
                </div>
                <div class="blog-data-item">
                  <p class="blog-data-item-value font-16-B">{{ numConvert(info.count, 2) }}</p>
                  <p class="blog-data-item-label font-12">总观看量</p>
                </div>
                <div class="blog-data-item">
                  <p class="blog-data-item-value font-16-B">{{ info.rate }}</p>
                  <p class="blog-data-item-label font-12">互动率</p>
                </div>
                <div class="blog-data-item">
                  <p class="blog-data-item-value font-16-B">{{ numConvert(info.count, 2) }}</p>
                  <p class="blog-data-item-label font-12">视频数</p>
                </div>
              </div>
              <p class="blog-split"></p>
              <div class="blog-time flex-between flex-align-items-center">
                <p class="flex flex-align-items-center font-14">
                  <i class="iconfont icon-a-naozhong1"></i>频道创建时间
                </p>
                <span class="font-14">{{ info.time }}</span>
              </div>
              <div class="blog-location flex-between flex-align-items-center">
                <p class="font-14">红人地区</p>
                <span class="font-14">{{ info.location }}</span>
              </div>
              <p class="blog-split"></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue';
import numConvert from '@/js/numConvert.js';

const props = defineProps(['id']);
const emit = defineEmits(['close']);

const info = ref({
  name: 'xxxxx',
  cate: '时尚生活',
  img: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
  avatar: 'https://www.wotohub.com/static/img/koc_default_man.8132f247.svg',
  count: 111111,
  rate: '50%',
  desc: 'xxxxxx',
  time: '2023-12-15 16:00:00',
  location: '希腊'
});

const close = () => {
  emit('close', null);
}
</script>

<style lang="less" scoped>
.main {
  position: relative;
  z-index: 10;
  border-radius: 10px;
  background: #fff;
  width: 944px;

  .detail {
    padding: 16px 24px;

    .detail-header {
      margin-bottom: 24px;

      .detail-header-name {
        color: #323233;
        width: 700px;
      }

      .detail-header-btn {
        width: 72px;
        height: 32px;
        border-radius: 2px;
        border: 1px solid @main-color !important;
        color: @main-color !important;
        text-align: center;
        line-height: 30px;
      }
    }

    .detail-main {
      .prd {
        width: 310px;

        h3 {
          color: #323233;
          margin-bottom: 16px;
        }

        .prd-img {
          width: 310px;
          height: 246px;
          border-radius: 4px;
          overflow: hidden;
          position: relative;
          margin-bottom: 16px;

          img {
            width: 100%;
            height: 100%;
          }

          p {
            width: 56px;
            height: 56px;
            background: hsla(0, 0%, 57%, .45);
            border-radius: 50%;
            position: absolute;
            top: calc(50% - 28px);
            left: calc(50% - 28px);

            i {
              font-size: 16px;
              color: #fff;
            }
          }
        }

        .prd-data {
          margin-bottom: 24px;

          .prd-data-item {
            text-align: center;

            .prd-data-item-label {
              color: #323233;
              margin-bottom: 5px;
            }

            .prd-data-item-value {
              color: #323233;
            }
          }
        }

        .prd-title {
          color: #646566;
          margin-bottom: 16px;
        }
      }

      .blog {
        width: 522px;

        .blog-tab {
          color: #323233;
          position: relative;
          margin-bottom: 16px;
          height: 20px;

          &::before {
            content: "";
            width: 24px;
            height: 2px;
            background: @main-color;
            position: absolute;
            bottom: -2px;
            left: 16px;
          }
        }

        .blog-main {
          padding-top: 64px;
          background: #f8f8f8;
          border-radius: 4px;
          height: 606px;
          position: relative;

          .blog-btn {
            width: 40px;
            height: 40px;
            background: #fff;
            border: 1px solid @main-color;
            border-radius: 50%;
            color: @main-color;
            position: absolute;
            top: 24px;
            right: 24px;
            text-align: center;
            line-height: 40px;
          }

          .blog-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin-bottom: 12px;
          }

          .blog-name {
            color: #333;
            margin-bottom: 12px;
          }

          .blog-tag {
            line-height: 25px;
            padding: 0 7px;
            border-radius: 2px;
            color: #fff;
            background: linear-gradient(131deg, #ffe29f, #ff5277 96%) !important;
            margin-bottom: 20px;
          }

          .blog-split {
            width: 272px;
            height: 1px;
            background: #f0eff0;
            margin-bottom: 24px;
          }

          .blog-data {
            width: 272px;

            .blog-data-item {
              margin-bottom: 24px;
              width: 33.333%;

              .blog-data-item-value {
                color: @main-color;
                margin-bottom: 10px;
              }

              .blog-data-item-label {
                color: rgba(51, 51, 51, .65);
              }
            }
          }

          .blog-time {
            width: 272px;
            margin-bottom: 8px;

            p {
              color: rgba(51, 51, 51, .65);

              i {
                color: rgba(51, 51, 51, .65);
                font-size: 12px;
                margin-right: 8px;
              }
            }

            span {
              color: rgba(51, 51, 51, .65);
            }
          }

          .blog-location {
            width: 272px;
            margin-bottom: 24px;
            padding-left: 20px;

            p,
            span {
              color: rgba(51, 51, 51, .65);
            }
          }
        }
      }
    }
  }
}
</style>
